<template>
  <div>
    <template>
      <div slot="header" class="clearfix" style="text-align: center;line-height: 30px">
        <h3>供货结算</h3>
      </div>

      <el-table
          :data="providerOrder"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="ordernumber"
            label="订单号">
        </el-table-column>
        <el-table-column
            fixed
            prop="buynumber"
            label="采购编号">
        </el-table-column>
        <el-table-column
            prop="orderdate"
            label="订单日期">
        </el-table-column>
        <el-table-column
            prop="username"
            label="供应商名称">
        </el-table-column>
        <el-table-column
            prop="goodsname"
            label="商品名">
        </el-table-column>
        <el-table-column
            prop="standerd"
            label="规格">
        </el-table-column>
        <el-table-column
            prop="type"
            label="类型">
        </el-table-column>
        <el-table-column
            prop="orderprice"
            label="单价">
        </el-table-column>
        <el-table-column
            prop="ordernum"
            label="数量">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="结算">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="button" size="small">结算</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
export default {
  name: "ProviderOrderWebSocket",
  data(){
    return{
      providerOrder:[],
      messageget:'',
      state: 2,
      statement:''
    }
  },
  mounted() {
    this.init()
  },
  methods:{
    init(){
      this.load()
      if (typeof (WebSocket) == 'undefined'){
        console.log("你的浏览器不支持websocket")
      }else{
        console.log("你的浏览器支持websocket")
        let socketUrl = 'ws://127.0.0.1:8200/providerOrderWebSocket' //这里是使用ws协议, 不再是http协议
        //开启一个websocket服务
        let webSocket = new WebSocket(socketUrl)
        //打开事件--> 建立websocket连接
        webSocket.onopen =  function(){
          console.log("websocket已建立连接")
        }
        //将当前demo赋值给that变量 --> 在websocket调用的方法中使用的this是代表的websocket对象, 并不是代表当前界面的demo,会出现data中的数据赋值失败的问题
        let that = this
        //浏览器接收服务器通过websocket推送过来的消息, 属性设置为msg
        webSocket.onmessage = function (msg){
          that.messageget = msg.data  //这里使用that来调用data中的变量
          that.providerOrder = JSON.parse(that.messageget)
          that.$message.success("您有新的消息待审核, 请注意查收")
        }
        //关闭事件
        // webSocket.onclose = function () {
        //   console.log("websocket已关闭");
        // };
        //发生了错误事件
        webSocket.onerror = function () {
          console.log("websocket发生了错误");
        }
      }
    },
    load(){
      let url = '/csc/order/selelctAll'
      this.$axios.get(url).then(r=>{
        this.providerOrder = r.data
      })
    },
    handleClick(row){
      this.$confirm('确定结算?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.statement = '您供货的商品已结算, 结算详情: 订单号:'+ row.ordernumber + '、采购编号' + row.buynumber + '、订单日期' + row.orderdate + '、供应商名称' + row.username + '、商品名' + row.goodsname + '、规格' + row.standerd + '、类型' + row.type + '、单价' + row.orderprice + '、数量' + row.ordernum
        let url = '/csc/order/orderAccount'
        let fd = new FormData
        fd.append("ordernumber",row.ordernumber)
        fd.append("buynumber",row.buynumber)
        fd.append("state",this.state)
        fd.append("statement",this.statement)
        this.$axios.post(url,fd).then(r=>{
          this.$message.success(r.data)
          this.load()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    }
  }
}
</script>

<style scoped>

</style>